<template>
  <div>
    <div class="content banxin">
      <div class="left">
        <!-- teb栏 -->
        <el-tabs v-model="activeName">
          <el-tab-pane :label="labelValue" name="first">
            <ul class="article">
              <li
                v-for="(item, uid) in artic"
                :key="uid"
                @click="artic_Derails(item.article_id)"
              >
                <!-- 文章标题  -->
                <div class="title">{{ item.article_title }}</div>
                <!-- 文章摘要 -->
                <div class="abstract">{{ item.article_summary }}</div>
                <!-- 阅读,评论,点赞 -->
                <div class="out-box">
                  <div class="box-left">
                    <span class="reading">{{ item.article_view_count }} </span>
                    <span class="praise">{{ item.article_like_count }} </span>
                    <span class="comments">{{
                      item.article_comment_count
                    }}</span>
                  </div>
                  <div class="box-right">
                    <!-- 用户昵称 -->
                    <span class="user">{{ item.username }}</span>
                    <!-- 发布时间 -->
                    <span class="data">{{
                      timeDetal(item.article_createtime)
                    }}</span>
                  </div>
                </div>
              </li>
            </ul>
            <el-empty description="没有搜到哟宝~" v-if="blognum"></el-empty>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import getTime from "../../api/getTime/getTime";
import { mixin } from "../../mixin";
export default {
  name: "RankLists",
  mixins: [mixin],
  data() {
    return {
      dayTime: "", //今日时间
      monthStartTime: "", //上月开始时间
      monthEndTime: "", //上月结束时间
      weekStartTime: "", //上周开始日期
      weekEndTime: "", //上周结束日期
      blognum: false, //为空时显示空状态
      page_hide: true, //页面空状态时隐藏
      artic: [], // 博客数据
      activeName: "first", //导航栏默认先展示博客信息
      pageUrl: "", //主页传过来的参数
      labelValue: "榜单",
    };
  },
  methods: {
    // 搜索

    // 获取博客id,转入查看博客详情
    artic_Derails(id) {
      this.$router.push({
        name: "BlogDetails",
        query: {
          itemid: id,
        },
      });
    },

    rankListPage(value) {
      // 默认展示周榜
      if (!value) {
        this.pageUrl = "search/weekList";
      } else {
        this.pageUrl = value;
      }

      // 获取今天的时间
      this.dayTime = getTime.getToday().starttime;
      // 获取一个月的时间
      this.monthStartTime = getTime.getLastMonthDays().starttime;
      this.monthEndTime = getTime.getLastMonthDays().endtime;
      //     // 获取一周的时间
      this.weekStartTime = getTime.getLastWeekDays().starttime;
      this.weekEndTime = getTime.getLastWeekDays().endtime;
      var obj = {};
      // 根据接口判断要传递的参数
      // 日榜
      if (this.pageUrl == "search/dailyList") {
        obj = {
          currentTime: this.dayTime,
        };
        // 周榜
      } else if (this.pageUrl == "search/weekList") {
        obj = {
          startTime: this.weekStartTime,
          endTime: this.weekEndTime,
        };
        // 月榜
      } else if (this.pageUrl == "search/monthList") {
        obj = {
          startTime: this.monthStartTime,
          endTime: this.monthEndTime,
        };
      }
      // 连接服务器
      this.$http({
        method: "post",
        url: `${this.pageUrl}`,
        params: obj,
      }).then(({ data }) => {
        console.log("day", data);
        this.artic = data.data.article; //博客列表清空
        for (var i = 0; i < this.artic.length; i++) {
          this.$set(this.artic[i], "username", data.data.user[i].username);
        }
      });
    },
  },
  watch: {
    pageUrl() {
      const str = this.pageUrl;
      if (str == "search/weekList") {
        this.labelValue = "周榜";
      } else if (str == "search/dailyList") {
        this.labelValue = "日榜";
      } else if (str == "search/monthList") {
        this.labelValue = "月榜";
      }
    },
  },
  mounted() {
    this.rankListPage();
  },
};
</script>

<style scoped>
/* 内容展示区 */
.content {
  display: flex;
  width: 800px;
  box-sizing: border-box;
  margin: 20px auto;
  padding-bottom: 20px;
}
/* 左边搜索内容 */
.left {
  flex: 7;
  padding: 30px;
  margin-right: 20px;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
}
.left /deep/.el-tabs__item {
  font-size: 20px;
}
.left /deep/ .el-tabs__active-bar {
  width: 40px;
}
.left .article li {
  cursor: pointer;
  border-bottom: 1px solid rgb(240, 239, 239);
  margin: 10px 0 20px 0;
}
.left .article .title {
  font-size: 25px;
  font-weight: 700;
  /* margin-bottom: 10px; */
}
.left .article .abstract {
  font-size: 16px;
  color: #aaaaaa;
  margin: 15px 0;
}
.reading,
.praise,
.comments,
.user,
.data {
  color: #aaaaaa;
  display: inline-block;
  margin: 0 40px 0px 0;
  font-size: 18px;
}
.reading::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e62b";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 20px;
}
.praise::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\ec7f";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 20px;
}
.comments::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e8b9";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 18px;
}
.out-box {
  height: 30px;
  position: relative;
}
.box-left {
  position: absolute;
  left: 0;
}
.box-right {
  position: absolute;
  right: 0;
}
/* 分页位置 */
.el-pagination {
  text-align: center;
}
.left /deep/ .el-pagination.is-background .el-pager li,
.left /deep/ .el-pagination.is-background .btn-prev,
.left /deep/ .el-pagination.is-background .btn-next {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
}
</style>